<template>
  <el-row class="search" :gutter="20">
    <el-col :span="3"></el-col>
    <el-col :span="15">
      <div class="mt-4">
        <el-input placeholder="请输入内容" class="input-with-select" style="width: 600px; ">
          <template #append>
            <el-button type="primary">搜索</el-button>
          </template>
        </el-input>
        &nbsp;
        <el-button type="primary" @click="dialogFormVisible = true">添加电影</el-button>
        <el-dialog v-model="dialogFormVisible" title="Shipping address">
          <el-form :model="form">
            <el-form-item label="电影名" :label-width="formLabelWidth" style="width: 360px;">
              <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="影院" :label-width="formLabelWidth" style="width: 360px;">
              <el-input v-model="form.yuan" autocomplete="off" />
            </el-form-item>
            <el-form-item label="影厅" :label-width="formLabelWidth" style="width: 360px;">
              <el-input v-model="form.ting" autocomplete="off" />
            </el-form-item>
            <el-form-item label="上映日期" :label-width="formLabelWidth" style="width: 360px;">
              <el-date-picker v-model="value1" type="dates" placeholder="请选择上映日期" />
            </el-form-item>
            <el-form-item label="放映日期" :label-width="formLabelWidth" style="width: 360px;">
              <el-date-picker v-model="value2" type="dates" placeholder="请选择放映日期" />
            </el-form-item>
            <el-form-item label="放映时间" :label-width="formLabelWidth" style="width: 360px;">
              <el-date-picker v-model="value3" type="datetime" placeholder="请选择放映时间" format="YYYY/MM/DD hh:mm:ss"
                value-format="x" />
            </el-form-item>
            <el-form-item label="售价" :label-width="formLabelWidth" style="width: 360px;">
              <el-input v-model="form.monny" autocomplete="off" />
            </el-form-item>

          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false">
                确定
              </el-button>
            </span>
          </template>
        </el-dialog>
      </div>
    </el-col>
    <el-col :span="3"></el-col>

  </el-row>
  <!-- 对数据进行截取 是当前页数-1 乘以 显示条数     当前页数乘以显示条数 -->
  <el-table :data="
    filterTableData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)
  " style="width: 100%">
    <el-table-column label="排片ID" prop="order">
    </el-table-column>
    <el-table-column label="电影名" prop="moviename">
    </el-table-column>
    <el-table-column label="影院名" prop="name">
    </el-table-column>
    <el-table-column label="放映大厅" prop="date">
    </el-table-column>
    <el-table-column label="放映日期" prop="moviedata">
    </el-table-column>
    <el-table-column label="放映时间" prop="time">
    </el-table-column>
    <el-table-column label="售价（元）" prop="monny">
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button size="small" type="danger" @click="handleDelete(scope.row)">撤销</el-button>
      </template>
    </el-table-column>
    <!-- 添加输入框 -->
  </el-table>
  <!-- 设置导航 -->
 <!-- 修改下面得属性 -->
  <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
    :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
    :total="filterTableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>

<script setup lang="ts">
// 引用useStore
import { useStore } from 'vuex';
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  computed, onMounted, onUnmounted, ref, reactive,
} from 'vue';
import link from '@/api/link';
import http from '@/util/api';

// 得到store对象
const store = useStore();

// 分页实现//显示页数
const currentPage4 = ref(1);
// 最多显示几条
const pageSize4 = ref(10);
const handleSizeChange = (val: any) => {
  pageSize4.value = val;
};
const handleCurrentChange = (val: any) => {
  currentPage4.value = val;
};

interface User {
  order: number,
  moviename: string,
  name: string,
  date: string,
  moviedata: number,
  prices: number,
  time: number,
  monny: string,
}

// 动态渲染数据
const userList = ref([]);
onMounted(() => {
  // eslint-disable-next-line no-use-before-define
  getlist();
});
// filter过滤
// toLowerCase把字符串转换小写
// includes(search.value.toLowerCase())查找字符串是否包含search.value.toLowerCase()
// eslint-disable-next-line no-use-before-define, max-len
const filterTableData = computed(() => userList.value.filter((item: any) => item.name.toLowerCase().includes(search.value.toLowerCase())));
const getlist = () => {
  link('/rowpiece').then((res: any) => {
    console.log(res);

    userList.value = res.data;
    console.log('666', userList.value);
  });
};

let search = ref('');
const handleEdit = (index: number, row: any) => {
  // console.log(index,row)
  // 调用vuex修改
  store.commit('SET_DIALOG');
};

// 删除信息
const handleDelete = (row: any) => {
  console.log(row);

  ElMessageBox.confirm(
    '是否取消当前排期电影?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(() => {
      http(`/rowpiece/${row.id}`, 'delete').then((res: { status: number; }) => {
        if (res.status === 200) {
          ElMessage({
            type: 'success',
            message: '删除成功！',
          });
          getlist();
        } else {
          ElMessage({
            type: 'error',
            message: '删除失败！',
          });
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消！',
      });
    });
};

</script>

<style scoped>
.mt-4 {
  text-align: center;
  margin-bottom: 40px;
  margin-top: 20px;
}
.el-pagination {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  justify-content: center;
  align-items: flex-end;
}

</style>
